<template>
	<view class="content">
		<div class="card_list">
			<div class="list_item">
				<div class="item_top">
					<div class="item_l">
						<!-- <img src="../../static/index_top.png" alt=""> -->
					</div>
					<div class="item_r">
						<div class="item_name">
							金潇潇
						</div>
						<div class="item_time">
							<span>在校时间</span>
							<span>2016-2020</span>
						</div>
						<div class="item_type">
							<span>专业</span>
							<span>汉语言</span>
						</div>
					</div>
				</div>
				<div class="item_bottom">
					<img src="../../static/Card_list/icon.png" alt="">
					<img src="../../static/Card_list/icon1.png" alt="">
					<img src="../../static/Card_list/icon2.png" alt="">
				</div>
			</div>
			<div class="list_item">
				<div class="item_top">
					<div class="item_l">
						<!-- <img src="../../static/index_top.png" alt=""> -->
					</div>
					<div class="item_r">
						<div class="item_name">
							金潇潇
						</div>
						<div class="item_time">
							<span>在校时间</span>
							<span>2016-2020</span>
						</div>
						<div class="item_type">
							<span>专业</span>
							<span>汉语言</span>
						</div>
					</div>
				</div>
				<div class="item_bottom">
					<img src="../../static/Card_list/icon.png" alt="">
					<img src="../../static/Card_list/icon1.png" alt="">
					<img src="../../static/Card_list/icon2.png" alt="">
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: center;
	}

	.card_list {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;

		.list_item {
			width: 670rpx;
			height: 372rpx;
			background-image: url('../../static/Card_list/bg.png');
			margin-bottom: 20rpx;

			.item_top {
				width: 100%;
				display: flex;
				box-sizing: border-box;
				padding: 54rpx 40rpx;

				.item_l {
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					border: 2rpx solid #000000;

					img {
						width: 162rpx;
						height: 162rpx;
						margin: 10rpx;
						border-radius: 50%;
					}
				}

				.item_r {
					margin-left: 40rpx;

					.item_name {
						font-size: 36rpx;
						line-height: 60rpx;
						color: #333333;
						margin-top: 10rpx;
						font-weight: 600;
					}
				}

				.item_time,
				.item_type {
					width: 100%;
					display: flex;
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #333333;

					&>span:first-child {
						width: 120rpx;
					}

					&>span:last-child {
						margin-left: 44rpx;
					}

				}
			}

			.item_bottom {
				display: flex;
				justify-content: space-around;

				img {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>